<template>
	<view class="i-delectItem" @touchstart="touchstart" @touchmove="move" @touchend="end">
		<view class="body" :style="{transform: 'translateX('+translateX+ 'rpx)', height}">
			<slot></slot>
		</view>
		<view class="delect" @click.stop="handleDel"
			:style="{transform: 'translateX('+translateX+ 'rpx)', height, lineHeight: height}">
			删除
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, defineProps, defineEmits, watch, onMounted, getCurrentInstance } from 'vue';
	const props = defineProps({
		height: {
			type: String,
			default: '154rpx'
		}
	})
	const emit = defineEmits(['del'])
	const touch = ref(false)
	const startMove = ref(0)
	const translateX = ref(0)

	const touchstart = (e : any) => {
		touch.value = true
		startMove.value = e.touches[0].clientX
	}
	const move = (e : any) => {
		if (!touch.value) {
			return
		}
		translateX.value = e.touches[0].clientX - startMove.value
		if (translateX.value < - 140) {
			translateX.value = -140
			touch.value = false
		}

	}
	const end = (e : any) => {
		console.log(e, 'endendend');
		touch.value = false
		if (translateX.value > -140) {
			translateX.value = 0
		}
	}
	const handleDel = () => {
		emit('del')
	}
</script>

<style lang="scss" scoped>
	.i-delectItem {
		width: 100%;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;

		.body {
			transition: all 0.4s ease-out;
			display: inline-block;
			width: 100%;
			vertical-align: top;
			margin-right: 20rpx;
		}

		.delect {
			transition: all 0.4s ease-out;
			width: 120rpx;
			background-color: #FF453A;
			display: inline-block;
			vertical-align: top;
			color: #fff;
			text-align: center;
		}
	}
</style>